<template>
	<view class="box">
		<!-- 内容信息 -->
		<view class="ct contain">
			<!-- 营业状态 -->
			<view class="switchBox cell" style="padding: 0;">
				<view class="status">
					<span class="rightIcon">*</span>营业状态
				</view>
				<view class="swict">
					<u-switch v-model="checked" active-color="#6bc665" inactive-color="#e6e6e6"
						@change="switchChange"></u-switch>
				</view>
			</view>
			<!-- 营业时间 -->
			<view class="timeBox cell" @click="()=>this.showTime=true">
				<view class="time lr">
					<view class="left">
						<span class="rightIcon">*</span>营业时间
					</view>
					<view class="right">
						{{businessInfo.time}}
					</view>
				</view>
				<view class="icon">

				</view>
			</view>
			<!-- 商家名称 -->
			<view class="nameBox cell">
				<view class="name lr">
					<view class="left">
						<span class="rightIcon">*</span>商家名称
					</view>
					<view class="right">
						<input type="text" placeholder="请输入商家名称" v-model="businessInfo.dpName" />
					</view>
				</view>
			</view>
			<!-- 联系人 -->
			<view class="relationBox cell">
				<view class="relation lr">
					<view class="left">
						<span class="rightIcon">*</span>联系人
					</view>
					<view class="right">
						<input type="text" placeholder="请输入联系人" v-model="businessInfo.name" />
					</view>
				</view>
			</view>
			<!-- 联系人电话-->
			<view class="phoneBox cell">
				<view class="phone lr">
					<view class="left">
						<span class="rightIcon">*</span>联系电话
					</view>
					<view class="right">
						<input type="text" placeholder="请输入联系电话" v-model="businessInfo.phone" />
					</view>
				</view>
			</view>
			<!-- 所在区域-->
			<view class="areaBox cell">
				<view class="area lr">
					<view class="left">
						<span class="rightIcon">*</span>所在区域
					</view>
					<view class="right" @click="()=>this.showAddress=true">
						<input type="text" disabled="disabled" placeholder="请选择地址" v-model="businessInfo.area" />
					</view>
				</view>
				<view class="dwIcon">

				</view>
			</view>
			<!-- 详细地址-->
			<view class="detailAddressBox cell">
				<view class="address lr">
					<view class="left">
						<span class="rightIcon">*</span>详细地址
					</view>
					<view class="right">
						<textarea style="width: 460rpx;height: 80rpx;" type="text" placeholder="请输入详细地址"
							v-model="businessInfo.address"></textarea>
					</view>
				</view>
			</view>

		</view>
		<!-- logo -->
		<view class="logobox contain">
			<view class="title">
				<span class="rightIcon">*</span><span>店铺logo</span>
			</view>
			<view class="licence">
				<image v-if="showLogo" :src="showLogo" style="width: 330rpx; height: 240rpx;">
				</image>
				<u-icon name="trash-fill" size="36" style="position: absolute; top: 10rpx;right: 10rpx;"
					@click="deleteLogo"  v-show="showLogo"></u-icon>
				<view class="add" @click="addAlbum(3)">
					添加logo
				</view>
			</view>
		</view>
		<!-- 图片信息 -->
		<view class="picBox contain">
			<view class="title">
				<span class="rightIcon">*</span><span>商家照片</span><span style="color: #999999FF;">(默认第一张为封面图)</span>
			</view>
			<view class="album">
				<view class="item" v-for="(item,index) in showImg" :key="index">
					<image :src="item" mode="widthFix" style="width: 200rpx;height: 200rpx;"></image>
					<u-icon name="trash-fill" size="36" style="position: absolute; top: 10rpx;right: 10rpx;"
						@click="deleteTp(index)"></u-icon>
				</view>
				<view class="add pic" @click="addAlbum(1)">
					<image src="/static/photo.png" style="width: 80rpx; height: 80rpx;margin: 40rpx 60rpx 0 60rpx;">
					</image>
					<view class="addBtn">添加照片</view>
				</view>
			</view>
		</view>
		<!-- 营业执照 -->
		<view class="licenceBox contain">
			<view class="title">
				<span class="rightIcon">*</span><span>营业执照</span>
			</view>
			<view class="licence">
				<image v-if="showLic" :src="showLic" style="width: 330rpx; height: 240rpx;">
				</image>
				<u-icon name="trash-fill" size="36" style="position: absolute; top: 10rpx;right: 10rpx;"
					@click="deleteLic"  v-show="showLic"></u-icon>
				<view class="add" @click="addAlbum(2)">
					添加营业执照
				</view>
			</view>
		</view>

		<!-- 确认保存 -->
		<view class="confirm" @click="save">
			确认保存
		</view>
		<!-- 提示 -->
		<u-popup v-model="showTip" mode="center" width="410rpx" height="320rpx" border-radius="30" :closeable="true">
			<view class="pop" style="width:410rpx; height: 320rpx; background-color: #ffffff; border-radius: 30rpx;">
				<view class="tips">
					提示:不能超过8张图片
				</view>
				<view class="btn" @click="()=>this.showTip=false">
					知道了
				</view>
			</view>
		</u-popup>
		<!-- 地区 -->
		<u-picker v-model="showAddress" mode="region" :safe-area-inset-bottom="true"
			@confirm="confirmSelect"></u-picker>
		<!-- 选择营业时间 -->
		<u-popup v-model="showTime" height="520" mode="bottom" border-radius="20">
			<view class="popTime">
				<view class="btns">
					<view class="cancel" @click="cancelTime">
						取消
					</view>
					<view class="confirms" @click="confirmTime">
						确认
					</view>
				</view>
				<view class="time">
					<view class="start">
						<view class="item">
							营业时间
						</view>
						<view class="item ct" v-for="(item,index) in startTime" :key="index"
							@click="selectStart(item.id)" :class="{active:item.id==selectStartId}">
							{{item.time}}
						</view>
					</view>
					<view class="end">
						<view class="item">
							停业时间
						</view>
						<view class="item ct" v-for="(item,index) in endTime" :key="index" @click="selecEnd(item.id)"
							:class="{active:item.id==selectEndId}">
							{{item.time}}
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		toast
	} from '../../utils/common';
	import {
		editInfo
	} from '@/api/user.js'
	import {
		getStoreInfo
	} from '../../api/store.js'
	import config from '@/config/config.js'
	export default {
		data() {
			return {
				// switch
				checked: false,
				// 相册超出提示
				showTip: false,
				// 地区弹出
				showAddress: false,
				// 选择时间
				showTime: false,
				businessInfo: {
					// 状态
					status: 0,
					// 营业时间
					time: "9:00~22:00",
					// 店铺名字
					dpName: "某某某店铺",
					// 联系人
					name: "张三",
					// 联系电话
					phone: "13686950968",
					// 区域
					area: "贵州省贵阳市南明区",
					// 地址
					address: "贵州省贵阳市南明区花果园大街11号",
					// 运费
					free: "满500包邮，不足时运费5元起",
					// 配送范围
					Distribution: "10",
					// 相册
					albumList: [],
					// 营业执照
					licence: "",
					logo:"",
					introduce: ""
				},
				// 开始营业时间数组
				startTime: [{
					id: 0,
					time: "07:30"
				}, {
					id: 1,
					time: "08:00"
				}, {
					id: 2,
					time: "08:30"
				}],
				// 结束营业时间数组
				endTime: [{
					id: 0,
					time: "21:00"
				}, {
					id: 1,
					time: "21:30"
				}, {
					id: 2,
					time: "22:00"
				}],
				// 默认开始营业时间第一个
				selectStartId: 0,
				// 默认结束营业时间第一个
				selectEndId: 0,
				showImg: [],
				showLic: "",
				showLogo:""
			};
		},
		onShow(object) {
			// console.log(object)
			if (object) {
				this.businessInfo.Distribution = object.meter
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				let id = uni.getStorageSync('chainId')
				getStoreInfo(id).then(res => {
					if (res.code == 200) {
						let data = res.data
						this.businessInfo.time = data.end_open_time||"" + "-" + data.start_open_time||""
						this.businessInfo.status = data.status==1?true:false
						this.businessInfo.albumList = data.images
						this.businessInfo.dpName = data.name
						this.businessInfo.name = data.linkman
						this.businessInfo.address = data.zone
						this.businessInfo.logo = data.logo
						this.businessInfo.licence = data.license
						for (let i = 0; i < data.images.length; i++) {
							this.showImg.push(data.images[i])
						}
						this.showLic = data.license
						this.showLogo = data.logo
						this.checked = data.status==1?true:false
					}
				})
			},
			// 营业状态
			switchChange(value) {
				console.log("switch", value);
			},
			// 添加相册
			addAlbum(index) {
				let self = this
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					success: res => {
						let filePath = res.tempFilePaths[0];
						if (this.businessInfo.albumList.length > 8) {
							this.showTip = true
						} else {
							console.log(filePath);
							uni.uploadFile({
								url: config.baseUrl + '/api/public/images/upload',
								filePath: filePath,
								name: 'file',
								success: (res) => {
									if (res.statusCode == 200) {
										let data = JSON.parse(res.data);
										if (index==1) {
											self.businessInfo.albumList.push(data.data)
											self.showImg.push(config.baseUrl+"/uploads/"+data.data)
										}
										if(index==2){
											self.businessInfo.licence = data.data
											self.showLic =filePath
										}
										if(index==3){
											self.businessInfo.logo = data.data
											self.showLogo = filePath
										}
										uni.hideLoading();
									}
								},
								complete(res) {
									uni.hideLoading();
								}
							})
						}
					}
				});
			},
			deleteTp(index) {
				this.showImg.splice(index, 1)
				this.businessInfo.albumList.splice(index, 1)
			},
			// 跳转
			goPage(url) {
				uni.navigateTo({
					url
				})
			},
			// 选择地区
			confirmSelect(value) {
				this.businessInfo.area = value.province.name + value.city.name + value.area.name
			},
			// 选择开始营业时间
			selectStart(id) {
				this.selectStartId = id
			},
			// 选择结束营业时间
			selecEnd(id) {
				this.selectEndId = id
			},
			confirmTime() {
				this.businessInfo.time = this.startTime[this.selectStartId].time + "~" + this.endTime[this.selectEndId]
					.time
				// console.log(this.businessInfo.time);
				this.showTime = false
			},
			cancelTime() {
				this.showTime = false
			},
			save() {
				let obj = {
					status: this.checked ? "1" : "0",
					end_open_time: this.endTime[this.selectEndId].time,
					start_open_time: this.startTime[this.selectStartId].time,
					name: this.businessInfo.dpName,
					linkman: this.businessInfo.name,
					phone: this.businessInfo.phone,
					zone:  this.businessInfo.address,
					images: this.businessInfo.albumList,
					license: this.businessInfo.licence,
					logo:this.businessInfo.logo
				}
				editInfo(obj).then(res => {
					console.log(res);
					if (res.code == 200) {
						toast("修改成功")
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					}
				})
			},
			deleteLic() {
				this.showLic = ''
				this.businessInfo.licence = ""
			},
			deleteLogo() {
				this.showLogo = ''
				this.businessInfo.logo = ""
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #f5f5f5;
		box-sizing: border-box;
		padding-bottom: 20rpx;
		padding-top: 1rpx;
		min-height: 100vh;
	}

	.contain {
		width: 750rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		margin: 20rpx auto;
		background: #FFFFFF;
		border-radius: 10rpx;
	}

	// 内容信息
	.cell {
		box-sizing: border-box;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #e6e6e6;
		color: #333333FF;
		font-size: 30rpx;

		.arrowIcon {
			display: inline-block;
			width: 28rpx;
			height: 28rpx;
			background-image: url('/static/arrow.png');
			background-repeat: no-repeat;
			background-size: cover;
		}

		.dwIcon {
			display: inline-block;
			width: 42rpx;
			height: 42rpx;
			background-image: url('/static/icons/ldw.png');
			background-repeat: no-repeat;
			background-size: cover;
		}
	}

	.cell.none {
		border: none;
	}

	.rightIcon {
		font-size: 30rpx;
		color: #FF4754FF;
	}

	.lr {
		display: flex;

		.left {
			width: 140rpx;
			margin-right: 60rpx;
		}

		.right {
			width: 460rpx;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
	}

	// 商家相册
	.picBox {
		.title {
			font-size: 30rpx;
			margin-bottom: 20rpx;
		}

		.album {
			display: flex;
			flex-wrap: wrap;
			align-items: center;


			.pic {
				width: 200rpx;
				height: 200rpx;
				background: #F5F5F5;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}

			.add {
				text-align: center;
			}

			.addBtn {
				color: #999999FF;
			}

			.item {
				width: 200rpx;
				height: 200rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
				overflow: hidden;
				position: relative;
			}
		}
	}

	// 营业执照
	.licenceBox,
	.logobox
	{
		.title {
			font-size: 30rpx;
			color: #333333FF;
			margin-bottom: 20rpx;
		}

		.licence {
			width: 330rpx;
			height: 240rpx;
			background-color: #F5F5F5;
			border: 1px solid #E6E6E6;
			border-radius: 20rpx;
			overflow: hidden;
			line-height: 240rpx;
			text-align: center;
			color: #333333FF;
			position: relative;
		}
	}

	// 确认保存
	.confirm {
		width: 710rpx;
		height: 76rpx;
		background: #6BC665;
		border-radius: 38rpx;
		text-align: center;
		color: #fff;
		line-height: 76rpx;
		margin: 60rpx 20rpx 0 20rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
	}

	// 提示
	.pop {
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		text-align: center;

		.tips {
			font-size: 30rpx;
			margin: 60rpx 0 0 0;

		}

		.btn {
			width: 220rpx;
			height: 80rpx;
			text-align: center;
			background-color: #fe7443;
			border-radius: 20rpx;
			line-height: 80rpx;
			color: white;
			margin: 50rpx 85rpx 0 85rpx;
		}
	}

	.popTime {
		box-sizing: border-box;
		padding: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		background: #FFFFFF;

		.btns {
			display: flex;
			justify-content: space-between;

			.cancel {
				font-size: 33rpx;
				color: #949599;
			}

			.confirms {
				font-size: 33rpx;

				color: #6BC665;
			}
		}

		.time {
			display: flex;
			margin-top: 20rpx;

			.start,
			.end {
				width: 50%;
				text-align: center;
			}

			.start .item,
			.end .item {
				height: 100rpx;
				box-sizing: border-box;
				padding: 20rpx 0;
				border-top: 2rpx solid #e9edf0;
				color: #333333FF;
			}

			.ct {
				color: #949599FF;
			}

			.ct.active {
				font-size: 34rpx;
				color: #6BC665FF;
			}
		}
	}
</style>